<template>
    <div class="forgetpass">
        <div class="sign-flow-forget-page row aic jcc">
            <div class="main">
                <el-card class="box-card">
                    <div class="label-to-home"><router-link to="/login">返回登录</router-link></div>
                    <el-steps :active="stepActive" align-center >
                        <el-step title="1 请输入手机号" icon="el-icon-edit"></el-step>
                        <el-step title="2 填写验证码" icon="el-icon-edit-outline"></el-step>
                        <el-step title="3 修改成功" icon="el-icon-refresh"></el-step>
                    </el-steps>
                    <div class="step-child-1" v-if="stepActive == 0">
                        <el-form :model="form" label-width="80px">
                            <el-form-item label="手机号">
                                <el-input type="phone" v-model="form.mobile"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-form :model="form" label-width="80px">
                            <el-form-item label="新密码">
                                <el-input type="phone" v-model="form.password"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-form :model="form" label-width="80px">
                            <el-form-item label="确认密码">
                                <el-input type="phone" v-model="form.password2"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="step-child-1" v-if="stepActive == 1">
                        <el-form :model="form" label-width="80px">
                            <el-form-item label="验证码">
                                <el-input type="number" v-model="form.code"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="step-child-1 step-child-2" v-if="stepActive == 2">
                        <img src="../assets/succes.png" alt="">
                        <p>修改密码成功 <span><router-link to="/login">立即登录</router-link></span></p>
                    </div>

                    <div class="row" v-if="stepActive !== 2">
                        <el-button style="margin: 12px auto; display: block;" @click="prev">上一步</el-button>
                        <el-button style="margin: 12px auto; display: block;" @click="next">下一步</el-button>
                    </div>
                    
                </el-card>

                <div class="e-maill">
                    <img width="150" src="../assets/forget/mail_2x_r1TLIhr-G.gif" alt="">
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import {checkPhone} from '../common/utils'
export default {
  data(){
      return {
          stepActive: 0,
          form: {
              mobile: '',
              code: '',
              password: '',
              password2: '',
          },
          code: ''
      }
  },
  methods: {
    prev() {
        if (this.stepActive-- == 0) this.stepActive = 0;
    },
    
    async next() {
      try{
          if(this.stepActive == 0){

            if(this.form.mobile.length<11) throw "手机号不能少于11位";
            if(!checkPhone(this.form.mobile)) throw "请输入正确的手机号";
            if(this.form.password !== this.form.password2) throw "密码输入不一致";
            if(this.form.password.length < 8 || this.form.password.length > 32) throw "请输入8位至32位密码";

            let res = await this.$store.dispatch('getAuthCode',{mobile: this.form.mobile})
            if(res.code !== 0) return;
            console.log(res)
            this.code = res.data;
          }else if(this.stepActive == 1){
            
            if(this.form.code !== this.code) throw "验证码不正确";
            let res = await this.$store.dispatch('resetpwd',this.form)
            if(res.code !== 0) return;
          }
          if (this.stepActive++ > 2) this.stepActive = 0;
          
      }catch(err) {
          console.log(err)
          this.$message.error(err);
      }
    
      
    //   if(this.stepActive == 0) {

    //   }else{
    //       if (this.stepActive++ > 2) this.stepActive = 0;
    //   }
    }
  }
}
</script>
<style lang="less">
.forgetpass {
  .sign-flow-forget-page {
    background-image: url("../assets/forget/sign_bg.db29b0fb.png");
    background-repeat: no-repeat;
    // background-color: #b8e5f8;
    background-color: #fff;
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding-right: 15px;
    .label-to-home {
        display: block;
        text-align: right;
        margin-bottom: 10px;
    }
    .main {
        width: 480px;
        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 480px;
        }

        .step-child-1 {
            margin: 15px 0;
            input {
                border-top: 0;
                border-left: 0;
                border-right: 0;
                border-radius: 0;
            }
        }

        .step-child-2 {
            text-align: center;
            color: #333;
            img {
                width: 100px;
            }
            a {
                margin-left: 7px;
                color: #409EFF;
            }
        }

        .e-maill {
            text-align: right;
        }
    }
  }
}
</style>
